<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/at.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../images/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/gouwuche.css">
    <link rel="stylesheet" href="../css/footer2.css">

</head>

<body>
    <div id="top">
        <div class="banxin">
            <div class="l">
                <div class="tm">
                    <span class="iconfont icon-shouye"><a href="01shouye.html">天猫首页</a></span>
                    <span>喵，欢迎来天猫</span>
                    <span><a href="02dengluye.html">请登录</a></span>
                    <span><a href="03zhuceye.html">免费注册</a></span>
                </div>
            </div>
            <div class="r">
                <ul class="taobao">
                    <li>
                        <a href="01shouye.html">我的淘宝</a>
                        <span class="iconfont icon-arrow-down
                        "></span>
                        <ul>
                            <li>已买到的宝贝</li>
                            <li>已卖出的宝贝</li>
                        </ul>
                    </li>
                    <li>
                        <span class="iconfont icon-gouwuche
                        "></span>
                        <a href="#">购物车</a>
                    </li>
                    <li>
                        <a href="#">收藏夹</a>
                        <span class="iconfont icon-arrow-down
                        "></span>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <ul>
                            <li>收藏的宝贝</li>
                            <li>收藏的店铺</li>
                        </ul>

                    </li>
                    <li>
                        <span class="iconfont icon-shouji
                        "></span>
                        <a href="#">手机版</a>
                        <ul>
                            <li><img src="../images/ewm.png" alt=""></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">淘宝网</a>
                    </li>

                    <li>
                        <a href="#">商家支持</a>
                        <span class="iconfont icon-arrow-down
                        "></span>
                        <ul>
                            <li><b>商家：</b></li>
                            <li><a href="#">商家中心</a></li>
                            <li><a href="#">商家入驻</a></li>
                            <li><a href="#">商家品控</a></li>
                            <li><a href="#">天猫智库</a></li>
                            <li><a href="#"><b>帮助：</b></a></li>
                            <li><a href="#">商家服务大厅</a></li>
                            <li><a href="#"></a>问商家</li><br>
                        </ul>
                    </li>

                    <li>
                        <span class="iconfont icon-daohang
                        "></span>
                        <a href="#">网站导航</a>
                        <span class="iconfont icon-arrow-down
                        "></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- --------------第二栏  搜索------------------------------------- -->
    <div id="sousuo">
        <div class="banxin">
            <div class="zuo">
                <div class="t">
                    <!-- 图片 -->
                    <div class="tp">
                        <img src="../images/tm.png">
                    </div>
                    <!-- 客服 -->
                    <div class="kf">
                        <b>安踏官方网站</b><br>
                        <img src="../images/kf.png" alt="">
                    </div>
                    <div class="wuliu">
                        <p>描述服务物流</p>
                        <p>4.8-4.8-4.8<span class="iconfont icon-jiantou1"></span></p>
                        <div class="wjiantou"><span class="iconfont icon-arrow-down
                        "></span></div>
                    </div>
                    <!-- 二维码 -->
                    <div class="erweima">
                        <p>手机逛</p>
                        <span class="iconfont icon-erweima
                        "></span>
                        <span class="iconfont icon-arrow-down
                        "></span>
                        <div class="ewm"></div>
                    </div>
                </div>
            </div>
            <div class="you">
                <input type="text" id="ssk" placeholder="  搜索 天猫 商品/品牌/店铺">
                <div class="stm"><a href="#">搜天猫</a></div>
                <div class="sbd"><a href="01shouye.html">搜本店</a></div>
            </div>
        </div>
    </div>

    <div id="anta">
        <div class="banxin">
            <div class="logo"><a href="01shouye.html"><img src="../images/logo_03.jpg" alt=""></a></div>
            <!-- 搜索框 -->
            <div class="suk">
                <input type="text" id="oIp">
                <a href="#">
                    <span class="iconfont icon-fangdajing"></span>
                </a>
            </div>
        </div>
    </div>
    <!--  导航栏  -->
    <div id="dhl">
        <div class="banxin">
            <div class="nav">
                <ul>
                    <li><a href="01shouye.html">首页</a></li>
                    <li><a href="06feileiye.html">所有分类</a></li>
                    <li>
                        <a href="04sousuoye.html">男子系列</a>
                        <ul>
                            <li>
                                <a href="#">鞋类</a>
                            </li>
                            <li><a href="#">跑步鞋</a></li>
                            <li><a href="#">板鞋</a></li>
                            <li><a href="#">篮球鞋</a></li>
                            <li><a href="#">凉鞋</a></li>
                            <li><a href="#">拖鞋</a></li>
                            <li><a href="#">KT</a></li>
                            <li><a href="#">炙热</a></li>
                            <li><a href="#">霸道</a></li>
                        </ul>

                    <li>
                        <a href="#">女子系列</a>
                        <ul>
                            <li><a href="#">服装</a></li>
                            <li><a href="#">T恤</a></li>
                            <li><a href="#">卫衣</a></li>
                            <li><a href="#">运动套装</a></li>
                            <li><a href="#">运动长裤</a></li>
                            <li><a href="#">运动套装</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">儿童系列</a>
                        <ul>
                            <li><a href="#">跑鞋/休闲鞋</a></li>
                            <li><a href="#">篮球鞋</a></li>
                            <li><a href="#">T恤</a></li>
                            <li><a href="#">裤子</a></li>
                            <li><a href="#">凉鞋</a></li>
                            <li><a href="#">拖鞋</a></li>
                            <li><a href="#">KT</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">ANTA科技</a>
                    </li>
                    <li>
                        <a href="#">东奥国旗系列</a>
                        <ul>
                            <li><a href="#"><img src="../images/dah.png" alt=""></a></li>
                        </ul>
                    </li>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 购物车 -->
    <div id="gouwuche">
        <div class="banxin">
            <div class="con-fulid cart">
                <div class="con">
                    <div class="carH">
                        <p>您当前的位置：首页>购物车</p>
                        <h4><b><span
                                    class="iconfont icon-gouwuche"></span>购物车</b><em><span>查看需求</span><span>需求确认</span></em>
                        </h4>
                    </div>
                    <div class="carB">
                        <table font-weight='500'>
                            <tbody>
                                <tr>
                                    <th> <input type="checkbox"> </th>
                                    <th width='562PX'>商品</th>
                                    <th width="450PX">会员价（元）</th>
                                    <th width="180PX">优惠</th>
                                    <th width="210PX">数量</th>
                                    <th width="130PX">小计</th>
                                    <th width="190PX">操作</th>
                                </tr>
                            </tbody>
                        </table>
                        <div class='carBb'>
                            <b><input type="checkbox">安踏：<span>安踏官方旗帜店</span></b>
                            <em>包邮</em>
                        </div>
                        <table class="car-list">
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td width="562PX">
                                        <p><img src="../images/ss14.jpg"><span>安踏运动鞋<br></span></p>
                                    </td>
                                    <td width="450PX">
                                        <h4>市场价：388元<br>会员价：309元</h4>
                                    </td>
                                    <td width="180PX"></td>
                                    <td width="210PX">
                                        <h5><input type="button" value="-" class="colum_num">
                                            <input type="text" value="1">
                                            <input type="button" value="+" class="add_num"><br>库存<span>98</span>件
                                        </h5>
                                    </td>
                                    <td width="130PX">￥309元</td>
                                    <td width="190PX"><button>关注<tton><button>删除<tton>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="carF">
                        <p><input type="checkbox"><button>全选<tton><button>删除<tton><button>关注<tton>
                        </p>
                        <h4>商品原总价（不含运费）：<span>￥0.00元</span><button>提交预定<tton>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div id="foot">

        <!-- 七天无理由 -->
        <div id="qtly">
            <div class="banxin">
                <div class="zz">
                    <div class="s">
                        <a href="#">优</a>
                    </div>
                    <div class="sy">
                        <p><a href="#">品质保障</a></p>
                        <p><a href="#">品质护航 购物无忧</a></p>
                    </div>
                </div>
                <div class="zz">
                    <div class="s">
                        <a href="#">七</a>
                    </div>
                    <div class="sy">
                        <p><a href="#">七天无理由退换</a></p>
                        <p><a href="#">为你提供售后无忧保障</a></p>
                    </div>
                </div>
                <div class="zz">
                    <div class="s">
                        <a href="#">特</a>
                    </div>
                    <div class="sy">
                        <p><a href="#">特色服务体验</a></p>
                        <p><a href="#">为你呈现不一样的服务</a></p>
                    </div>
                </div>
                <div class="zz">
                    <div class="s">
                        <a href="#">帮</a>
                    </div>
                    <div class="sy">
                        <p><a href="#">帮助中心</a></p>
                        <p><a href="#">你的购物指南</a></p>
                    </div>
                </div>

            </div>
        </div>

        <!-- 购物指南 -->
        <div id="gwzl">
            <div class="banxin">
                <ul>
                    <li>
                        购物指南
                        <ul>
                            <li><a href="#">免费注册</a></li>
                            <li><a href="#">开通支付宝</a></li>
                            <li><a href="#">支付宝充值</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        天猫保障
                        <ul>
                            <li><a href="#">发票保障</a></li>
                            <li><a href="#">售后规则</a></li>
                            <li><a href="#">缺货赔付</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        支付方式
                        <ul>
                            <li><a href="#">快捷支付</a></li>
                            <li><a href="#">信用卡</a></li>
                            <li><a href="#">余额宝</a></li>
                            <li><a href="#">蚂蚁花呗</a></li>
                            <li><a href="#">货到付款</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        商家服务
                        <ul>
                            <li><a href="#">天猫规则</a></li>
                            <li><a href="#">商家入驻</a></li>
                            <li><a href="#">商家中心</a></li>
                            <li><a href="#">天猫智库</a></li>
                            <li><a href="#">物流服务</a></li>
                            <li><a href="#">喵言喵语</a></li>
                            <li><a href="#">运营服务</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        购物指南
                        <ul>
                            <li><a href="#"><img src="../images/erweima.png" alt=""></a></li>
                        </ul>
                    </li>
                </ul>
                <img src="../images/mm.png" alt="">
            </div>
        </div>


        <div id="bot">
            <div class="banxin">
                <div class="ul1" style="height: 30px;background-color: black;">
                    <ul>
                        <li><a href="#">关于天猫</a></li>
                        <li><a href="#">服务大厅</a></li>
                        <li><a href="#">开放平台</a></li>
                        <li><a href="#">诚聘英才</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">网站合作</a></li>
                        <li><a href="#">法律声明</a></li>
                        <li><a href="#">隐私权政策</a></li>
                        <li><a href="#">知识产权</a></li>
                        <li><a href="#">康正举报</a></li>
                        <li><a href="#">不当竞争举报</a></li>
                    </ul>
                </div>

                <ul>
                    <li><a href="#">阿里集团</a></li>
                    <li><a href="#">淘宝网</a></li>
                    <li><a href="#">天猫</a></li>
                    <li><a href="#">聚划算</a></li>
                    <li><a href="#">全球速麦迪</a></li>
                    <li><a href="#">支付宝</a></li>
                    <li><a href="#">1688</a></li>
                    <li><a href="#">阿里妈妈</a></li>
                    <li><a href="#">飞猪</a></li>
                    <li><a href="#">阿里云计算</a></li>
                    <li><a href="#">AliOS</a></li>
                    <li><a href="#">阿里通信</a></li>
                    <li><a href="#">万网</a></li>
                    <li><a href="#">高德</a></li>
                    <li><a href="#">钉钉</a></li>
                </ul>
                <!-- </div>  -->
                <p><span>增说电信业务经营许可证：浙B2-20110446</span> <span>市场名称登记证：工商网市字3301004119号</span>
                    <span>出版物网络交易平台服务经营备案证：新出发浙备字第2019002号</span>
                </p>
                <p><span>互联网违法信息举报电话: 0571-81683755 blxxjb@alibaba-inc. com</span> <span>互联网药品信息服务资质证书编号:浙(经营性)
                        -2017-0005</span>
                    <span><img src="../images/hz.png" alt=""> 浙公网安备33010002000120号
                    </span>
                </p>

                <p><span>医疗器械网络交易服务第三方平台备案:(浙)网械平台备字[2018]第00002号</span> <span></span><span></span></p>

                <p><span>浙江省网络食品销售第三方平台提供者备案:浙网食A33010002
                    </span> <span>12318举报</span>
                    <span>浙B2-20110446-1</span>
                </p>
                <p><span>&copy;2003-现在TMALL.COM版视所有</span></p>
            </div>
        </div>

    </div>
</body>

</html>
<script src="../js/tost.js"></script>
<script>
 var that;
  class ShopCart {
    constructor(ele) {
      this.ele = ele;
      this.money = $('.money');
      this.num = $('.num');
      that = this;
      this.dateAdd();
      this.bindEvents();
    }
    dateAdd() {
      for (let i = 0; i < json.length; i++) {
        let cTr = document.createElement('tr');
        for (let j in json[i]) {
          let cTd1 = document.createElement('td');
          cTd1.innerHTML = json[i][j];
          if (j == 'sum') {
            cTd1.className = 'xj';
          }
          cTr.appendChild(cTd1);
        }
        let cTd2 = document.createElement('td');
        cTd2.innerHTML = `<input type="button" value="删除" class="del_num">`;
        cTr.appendChild(cTd2);
        that.ele.appendChild(cTr);
      }
      that.getSum();
    }
    bindEvents() {
      that.ele.onclick = function (e) {
        let ev = e || window.event;
        let t = ev.srcElement || ev.target;
        if (t.className == 'add_num') {
          that.add_num(t);
          that.getSum();
        }
        if (t.className == 'cloum_num') {
          that.cloum_num(t);
          that.getSum();
        }
        if (t.className == 'del_num') {
          that.del_num(t);
          that.getSum();
        }
      }
      $('table').onmousedown = function (e) {
        let x = e.clientX - $('table').offsetLeft;
        console.log(x);
        let y = e.clientY - $('table').offsetTop;
        document.onmousemove = function (ev) {
          var l = ev.clientX - x;
          var t = ev.clientY - y;
          var wwi = window.innerWidth - $('table').offsetWidth;
          var whe = window.innerHeight - $('table').offsetHeight;
          if (l <= 0) {
            l = 0;
          }
          if (l >= wwi) {
            l = wwi - 5;
          }
          if (t <= 0) {
            t = 0;
          }
          if (t >= whe) {
            t = whe - 5;
          }
          $('table').style.top = t + 'px';
          $('table').style.left = l + 'px';
        }
        document.onmouseup = function () {
          document.onmousemove = null;
        }
      }
    }
    add_num(t) {
      let price = parseInt(t.parentNode.previousElementSibling.innerHTML);
      let n = t.previousElementSibling.value;
      n++;
      t.previousElementSibling.value = n;
      t.parentNode.nextElementSibling.innerHTML = n * price + '元';
    }
    cloum_num(t) {
      let price = parseInt(t.parentNode.previousElementSibling.innerHTML);
      let n = t.nextElementSibling.value;
      n--;
      if (n < 1) {
        n = 1;
        alert('不能减了！');
      }
      t.nextElementSibling.value = n;
      t.parentNode.nextElementSibling.innerHTML = n * price + '元';
    }
    
    getSum() {
      let sum = 0;
      let num = 0;
      let oXj = document.querySelectorAll('.xj');
      let oSum = document.querySelectorAll('.num');
      for (let i = 0; i < oXj.length; i++) {
        sum += parseInt(oXj[i].innerHTML);
        num += parseInt(oSum[i].value);
      }
      that.money.innerHTML = sum + '元';
      that.num.innerHTML = num + '个';
    }
  }
  let obj = $('tbody');
  new ShopCart(obj);
</script>